<!--
 * 功能： 文章列表-item组件
 * 作者： caihan
 * 日期:  2021-8-13 5:01:06 ?F10: PM?
 -->
<template>
	<view class="article-layout flex-column py20" @click.stop="onClickItem">
		<block v-if="!article.envelopePic">
			<!-- 标题 -->
			<view class="line-h2 fs32 mx30" style="width: 630rpx;">{{article.title}}</view>
			<view class="flex mt30 fs20 mx30">
				<view class="">{{article.chapterName || article.superChapterName}}</view>
				<view class="ml20">作者: {{article.shareUser || article.author}}</view>
				<view style="margin-left: auto;">发布时间: {{getDate(article.publishTime)}}</view>
			</view>
		</block>
		<block v-else>
			<view class="flex">
				<u-lazy-load class="ml30" style="width: 100rpx;" borderStyleStr="10rpx 10rpx 10rpx 10rpx"
					:image="article.envelopePic" height="100"></u-lazy-load>
				<view class="flex-column" style="width: 530rpx;">
					<!-- 标题 -->
					<view class="line-h2 fs32 mx30" style="width: 530rpx;">{{article.title}}</view>
					<view class="flex mt30 fs20 mx30">
						<view class="">{{article.chapterName || article.superChapterName}}</view>
						<view class="ml20">作者: {{article.shareUser || article.author}}</view>
						<view style="margin-left: auto;">发布时间: {{getDate(article.publishTime)}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import dateUtils from '@/common/date-utils.js';
	export default {
		name: "article-item",
		components: {},
		data() {
			return {}
		},
		props: {
			article: {
				type: Object,
				default: () => {
					return {
						link: "",
						publishTime: 1628817840000,
						shareUser: "蝶舞落红尘",
						title: "【JVM入门食用指南】JVM内存管理"
					}
				}
			}
		},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			getDate: function(time) {
				return dateUtils.friendlyDate(time)
				// return dateUtils.getDateFormat(time)
			},
			onClickItem: function() {
				// {
				// 	"apkLink": "",
				// 	"audit": 1,
				// 	"author": "",
				// 	"canEdit": false,
				// 	"chapterId": 502,
				// 	"chapterName": "自助",
				// 	"collect": false,
				// 	"courseId": 13,
				// 	"desc": "",
				// 	"descMd": "",
				// 	"envelopePic": "",
				// 	"fresh": false,
				// 	"host": "",
				// 	"id": 19369,
				// 	"link": "https://juejin.cn/post/6995614602352394277",
				// 	"niceDate": "2天前",
				// 	"niceShareDate": "2天前",
				// 	"origin": "",
				// 	"prefix": "",
				// 	"projectLink": "",
				// 	"publishTime": 1628817840000,
				// 	"realSuperChapterId": 493,
				// 	"selfVisible": 0,
				// 	"shareDate": 1628817840000,
				// 	"shareUser": "蝶舞落红尘",
				// 	"superChapterId": 494,
				// 	"superChapterName": "广场Tab",
				// 	"tags": [{
				// 		"name": "公众号",
				// 		"url": "/wxarticle/list/408/1"
				// 	}],
				// 	"title": "【JVM入门食用指南】JVM内存管理",
				// 	"type": 0,
				// 	"userId": 22830,
				// 	"visible": 1,
				// 	"zan": 0
				// }
				this.$navTo(`/packages/article/article-detail?url=${encodeURIComponent(this.article.link)}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-layout {
		width: 690rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: $cmain;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		color: $cfff;
	}
</style>
